<div
  #inputNumber
  class="x-input-number"
  [class.x-flex]="justify || align || direction"
  [class.x-disabled]="disabled"
  [class.x-required]="requiredIsEmpty"
  [class.x-invalid]="invalid"
>
  <label *ngIf="label" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
  <div class="x-input-number-row">
    <x-button
      class="x-input-number-reduce"
      icon="fto-minus"
      size="medium"
      [disabled]="disabled || minDisabled"
      (click)="!minDisabled && plus($event, step, false)"
      (mousedown)="!minDisabled && down($event, step, false)"
      (mouseup)="up($event)"
    ></x-button>
    <input
      #inputEleRef
      type="text"
      [placeholder]="placeholder"
      [required]="required"
      [disabled]="disabled"
      [(ngModel)]="displayValue"
      (ngModelChange)="change($event)"
    />
    <x-button
      class="x-input-number-plus"
      icon="fto-plus"
      size="medium"
      [disabled]="disabled || maxDisabled"
      (click)="!maxDisabled && plus($event, step)"
      (mousedown)="!maxDisabled && down($event, step)"
      (mouseup)="up($event)"
    ></x-button>
    <ng-container *ngIf="invalid">
      <div class="x-border-error x-top-left"></div>
      <div class="x-border-error x-top-right"></div>
      <div class="x-border-error x-bottom-left"></div>
      <div class="x-border-error x-bottom-right"></div>
    </ng-container>
  </div>
</div>
